All Posts
News bits
Material UI v7 がリリース
Material UI v7 がリリース
Material UI v7 が正式にリリースされました。
https://mui.com/blog/material-ui-v7-is-here/
ESM サポートの改善や非推奨になっていた API の削除に加えて、スロットパターンの実装と CSS レイヤーのサポートが行われています。
スロットパターンの実装
コンポーネントの内部要素を置き換えたりするための API が標準化されました。
今までは*Propsなどのプロパティを通して内部要素に干渉する手段などがありましたが、
これらは廃止され、slotsとslotPropsプロパティを使用するようになっています。以前の方法に比べ、より細かい制御が可能なことに加え、手段の一貫性が向上しています。
https://mui.com/material-ui/customization/overriding-component-structure/
// ルートスロットの指定
// ルート（一番外側の要素）の場合はcomponentで指定する
<Button component="a" href="/" >Link</Button>
// 内部スロットの指定
// 内部の要素の場合はslotsで指定する
<Autocomplete
slots={{
popper: PopperComponent,
}}
/>
// スロットに渡すpropsの指定
<Autocomplete slotProps={{
// 対応した内部スロットの要素に指定されたpropsが渡される
popper: { 'data-testid': 'my-popper' }
// ルートスロットに渡す場合はrootに指定する
root: { id: 'badge1' }
}} />CSS レイヤーのサポート
Material UI のスタイルを CSS レイヤーでラップできるようになり、Tailwind CSS v4 などのモダンツールとの統合が可能になりました。
// Next.js App RouterでのCSSレイヤーの有効化例
// app/layout.tsx
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
import GlobalStyles from "@mui/material/GlobalStyles";
export default function RootLayout(props) {
const { children } = props;
return (
<html lang="en">
<body className={roboto.variable}>
<AppRouterCacheProvider options={{ enableCssLayer: true }}>
<GlobalStyles styles="@layer theme,base,mui,components,utilities;" />
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</AppRouterCacheProvider>
</body>
</html>
);
}著者について
Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.
In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.
In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.
In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.
I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.